<template>
  <div class="uchatContainer" >
    <div class="top" :style="{backgroundColor:msgStyle.topColor,textAlign:'center'}"><span v-text="msgStyle.topName" :style="{color:msgStyle.topNameColor}"></span>
      <p @touchend="back()">
        <yd-icon name="back"  custom slot="icon" size=".3rem" color='#ffffff'></yd-icon>
      </p>
    </div>
    <div class="msgContainer" :style="{backgroundColor:'#000a08',color:'#ffffff'}">
      <div class="list" v-for="(item,index) in chatNow" :key="index">
        <div class="time">
          {{item.time}}
        </div>
        <div class="msgDetail">
          <!-- 用户头像 -->
          <img  :src="item.img"  :class="{upic:true,self:(item.userId==myID)}">
         
          <div :class="{msg:true,selfMsg:(item.userId==myID)}">
            <!-- 消息 -->
            <span v-if="item.msg">{{item.msg}}</span>
            <!-- 图片 -->
            <yd-lightbox v-if="item.pic">
              <yd-lightbox-img :src="item.pic"  style="max-width:4rem;"></yd-lightbox-img>
            </yd-lightbox>
            <!-- 语音 -->
              <p class="audio" v-if="item.amr" @touchend="play(index)">
                <i v-if="item.userId!=myID&&item.play==false"></i>
                <img src="./img/lamr.png" v-if="item.userId==myID" class="myamr">
                <img src="./img/ramr.png" v-if="item.userId!=myID" class="oamr">
                <audio :src="item.amr" class="allaudio"   v-show="false" :id="'audio_'+index">
                  <!-- <source > -->
                </audio>                
              </p>
          </div>
          <img src="./img/sj1.png" class="sjL" v-if="!(item.userId==myID)" >
          <img src="./img/sj2.png" class="sjR" v-if="(item.userId==myID)">
          <div class="sjx"></div> 
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import myAudio from "@/common/js/base/chatAudio.js"
  export default {
    props:['styleChat','chatNow'],
    
    data(){
      return {
        msgStyle:{
          topColor:'#000000',
          topNameColor:'#ffffff',
          topName:'此功能尚不完善，正在改进中', 
        },
        myID:localStorage.userid,//保存自己的ID
        // sjShow:true,
        // audio:false,
        // chatNow:[
        //   {
        //     img: "http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",
        //     msg:'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈阿斯顿撒大所大所大所大所多所多撒大所大大所大所大所大所多大大所多撒大所大所大所大所多撒多sssssssssssssssssssssssssssssssssssssssssssssss哈哈哈',
        //     time:'2017-1-1'
        //   },
        //   {
        //     img: "http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",
        //     msg:'哈哈哈撒打算大所大所哈哈',
        //     time:'2017-1-1',
        //     myMsg:true
        //   },
        //   {
        //     img: "http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",
        //     msg:'哈哈哈哈哈',
        //     time:'2017-1-1'
        //   },
        // ]
      }
    },
    watch:{
    },
    methods:{
      back(){
        this.$router.back()
      },
      play(index){//播放音频
            let _this=this
            let audioNow=document.getElementById("audio_"+index)
            let audios=document.querySelectorAll(".allaudio")
            // document.getElementById("audio").pause()
            let auto=function(num){
                for(let j=num;j<_this.chatNow.length;j++){
                  if(_this.chatNow[j].play==false){ 
                    _this.chatNow[j].play=true
                    document.getElementById("audio_"+j).play()
                   document.getElementById("audio_"+j).onended=auto(j)
                  }
                }   
            }            
            for(let i=0;i<audios.length;i++){
              audios[i].pause()
            }
            _this.chatNow[index].play=true
            console.log( _this.chatNow[index])
            audioNow.play()
            audioNow.onended=auto(index)
            // this.audio=true
          //  myAudio.startPlay(this.chatNow[index].amr)
          //  var p=this.$store.state.auobj;
          //  console.log(p)
          // //  console.log(this.chatNow[index].amr)
          //   p.s.play(()=>{
          //    console.log("成功")
          //    console.log(p.r)
          //    this.audio=true
          //    console.log(p.s.getDuration() )
          //     this.$emit("playChange",index)
          //  })
         
      },
      // autoPlay(){//自动播放语音
      //     for(let i=0;i<this.chatNow.length;i++){
      //       if(this.chatNow[i].amr&&this.chatNow[i].play==false){
      //         myAudio.startPlay(this.chatNow[i].amr)
      //       }
      //     }
      // }
    },
    updated(){
      document.querySelector(" .uchatContainer .msgContainer").scrollTop=10000000000;
      // console.log(document.querySelector(" .uchatContainer .msgContainer").scrollTop)
      // localStorage.setItem("chat_"+localStorage.userid,JSON.stringify(this.chatNow))
      localStorage.chat=JSON.stringify(this.chatNow)
        // for(let i=0;i<this.chatNow.length;i++){
        //     if(this.chatNow[i].amr&&this.chatNow[i].play==false){
        //       console.log("aaaa")
        //      this.audio=false
        //      this.play(i)
        //      break
        //      if(this.audio==true){
        //        continue
        //      }
        //     }
        //   }
    },
    activated(){

    }
  }
</script>
<style lang="less" scoped>
  @import "~less/base";
  .uchatContainer{
    .top{//顶部标题
      position: fixed;
      top:0;
      width: 100%;
      height:1.1rem;
      line-height: 1.1rem;
      font-size: 14px;
      p{
        float: left;
        margin-left: .3rem;
        i{
          float: left;
        }
      }
      span{
        margin-right: .3rem;
      }
    }
    .msgContainer{//消息容器
      z-index: 40;
      position: fixed;
      top:1.1rem;
      left:0;
      bottom:1.5rem;
      right:0;
      overflow-x: hidden;
      .list{//消息
        padding: 0 .2rem;
        clear: both;
        margin-bottom: .5rem;

        .time{
            text-align: center;
            line-height:.8rem;
            /*margin: .3rem;*/
          }
        .msgDetail{//消息内容
          .upic{//用户头像
              width: .8rem;
              float: left;
          }
          .self{
            float: right;
          }
          .sjL,.sjR{//三角
            width: .4rem;
            /*height: .4rem;*/
            float: left;
            margin-top: .04rem;
          }
          .sjR{
            position: absolute;
            right: .92rem;
            margin-top: .03rem;
          }
          .msg{//内容
            display: inline-block;
            margin-left: -.2rem;
            min-height: .4rem;
            max-width: 80%;
            background-color: #ffffff;
            color: #000;
            padding: .1rem .2rem;
            line-height:.3rem;
            border-radius: 5px;
            word-break: break-all;
            line-height: 100%;
          }
          .selfMsg{
            float: right;
            margin-right:.18rem;
            background-color:#bee36f;
            /*margin-top: .5rem;*/
            margin-bottom: .5rem;
          }
          .audio{//语音
            min-width:1.5rem;
            height:.5rem;
            line-height: .5rem;
            i{//提示
              width: .1rem;
              height: .1rem;
              border-radius: 50%;
              background-color: red;
              position: absolute;
              left: 3.1rem;
              margin-top: -.15rem;
            }
            // .myalert{
            //   right: 3.1rem;
            //   margin-top: -.15rem;
            // }
            img{
              width: .3rem;
              margin-top: .1rem;
            }
            .myamr{
              float: right;
            }
            .oamr{
              float: left;
            }
          }
        }
      }
    }
  }
</style>
